<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layui</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script> </head>

<body>
    <table id="demo"></table>
    <script>
        layui.use('table', function () {
            var table = layui.table;
            // 创建一个table实例
            var inst = table.render({
                elem: '#demo',
                height: 200,
                url: '', // 数据接口
                page: true, // 开启分页
                cols: [[ // 表头
                    { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
                    { field: 'username', title: '用户名', width: 80 },
                    { field: 'sex', title: '性别', width: 80, sort: true },
                    { field: 'city', title: '城市', width: 80 },
                ]]
            })
        });

        // 方法渲染
        var table = layui.table;
        //执行渲染
        table.render({
            elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
            , height: 315 //容器高度
            , cols: [{}] //设置表头
            //,…… //更多参数参考右侧目录：基本参数选项
        });

        // 转换静态表格
        //转换静态表格
        table.init('demo', {
            height: 315, //设置高度
            // //注意：请务必确保 limit 参数
            // （默认：10）是与你服务端限定的数据条数一致
            limit: 10 
            //支持所有基础参数
        });

    </script>
    <table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', 
            page:true, id:'test'}" lay-filter="test">
        <thead>
            <tr>
                <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                <th lay-data="{field:'username', width:80}">用户名</th>
                <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
                <th lay-data="{field:'city'}">城市</th>
                <th lay-data="{field:'sign'}">签名</th>
                <th lay-data="{field:'experience', sort: true}">积分</th>
                <th lay-data="{field:'score', sort: true}">评分</th>
                <th lay-data="{field:'classify'}">职业</th>
                <th lay-data="{field:'wealth', sort: true}">财富</th>
            </tr>
        </thead>
    </table>
</body>

</html>